<template>
	<view class="set">
		<!-- <map style="width: 100vw; height: 100vh" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="CliTap"></map> -->
		<u-navbar title="设置" :border-bottom="false"></u-navbar>
		<view class="avatar">
			<label class="avatar_img" for="login">
				<img :src="avatar" alt="" />
				<view class="text">更换</view>
			</label>
			<button open-type="chooseAvatar" @chooseavatar="chooseavatar" id="login"></button>
		</view>
		<view class="box">
			<view class="i">
				<view class="l">名称</view>
				<view class="r">
					<input type="text" placeholder="请输入用户名称" v-model="user.real_name" style="text-align: right" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view>
			<!-- <view class="i">
				<view class="l">手机号</view>
				<view class="r">
					<input type="tel" placeholder="请输入用户手机号" v-model="user.tel" disabled style="text-align: right" />
					<img src="../../static/set.png" alt="" class="img" />
				</view>
			</view> -->
		</view>
		<view class="bt" @click="submit">确认修改</view>
		<view class="bt" @click="login">退出登录</view>
	</view>
</template>

<script>
import { qiniutoken, saveuserinfo } from '../../libs/axios.js';
import _ from 'lodash';
export default {
	data() {
		return {
			latitude: 30.653706757904782,
			longitude: 114.25687379746591,
			covers: [
				{
					id: 1,
					latitude: 30.653706757904782,
					longitude: 114.25687379746591,
					title: '我家',
					iconPath: '../../static/redAaddress.png',
					width: '60rpx',
					height: '70rpx'
				}
			],
			avatar: '',
			user: {},
			form: {}
		};
	},
	onLoad() {
		this.user = uni.getStorageSync('user');
		console.log(this.user);
		this.avatar = this.$store.state.imgUrl + this.user.avatar;
		this.form.img = this.user.avatar;
	},
	methods: {
		login() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		async getqiniutoken() {
			let info = await qiniutoken({
				scope: this.$store.state.scope_img
			});
			this.token = info.data;
		},
		submit: _.debounce(
			async function () {
				let info = await saveuserinfo({
					real_name: this.user.real_name,
					avatar: this.form.img
				});
				uni.showToast({
					title: '更新成功',
					icon: 'success',
					duration: 2000
				});
				this.user.avatar = this.form.img;
				uni.setStorageSync('user', this.user);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		),
		async getUploadFile(file, key) {
			await this.getqiniutoken();
			const _this = this;
			return new Promise((je, jc) => {
				uni.uploadFile({
					url: 'https://upload-z2.qiniup.com',
					filePath: file,
					name: 'file',
					formData: {
						key: key, // 存到七牛云后的文件名字，访问图片会用到
						token: _this.token // uploadToken，需要动态获取，调用云函数接口获取
					},
					success(res) {
						console.log(res);
						je(res);
					},
					fail(err) {
						console.log('上传失败了', err);
					}
				});
			});
		},
		async chooseavatar(e) {
			console.log(e);
			var key = 'images/share/' + uni.getStorageSync('ouid') + '_' + 'user' + '_' + Date.parse(new Date()) + '.png';
			let info = await this.getUploadFile(e.detail.avatarUrl, key);
			let path = JSON.parse(info.data).key;
			this.form.img = path;
			this.avatar = this.$store.state.imgUrl + path;
		}
	}
};
</script>

<style lang="scss">
.set {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.avatar {
		text-align: center;
		.avatar_img {
			display: inline-block;
			width: 80px;
			height: 80px;
			margin: 40px 0;
			border-radius: 50%;
			overflow: hidden;
			position: relative;
			img {
				width: 100%;
				height: 100%;
			}
			.text {
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				background: rgba(238, 238, 238, 0.3);
				color: #eee;
			}
		}
	}
	.box {
		.i {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			.l {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.r {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				.img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
}
</style>
